<template>
  <view>
    <u-keyboard v-model="show" :mask="true" :mask-close-able="true" :dot-enabled="false" :safe-area-inset-bottom="true"
      :tooltip="false" @change="onChange" @backspace="onBackspace">
      <view class="pay-wrap">
        <view class="money">
          <text>{{money}}</text>
          <text class="unit">{{unit}}</text>
        </view>
        <u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password" :disabled-keyboard="true" :breathe="false"></u-message-input>
        <view class="tips">支付键盘</view>
      </view>
    </u-keyboard>
  </view>
</template>

<script>
  // https://uviewui.com/components/keyboard.html
  // https://uviewui.com/components/messageInput.html
  export default {
    props: {
      value: {
        type: Boolean,
        default: false
      },
      money: {
        type: [Number, String],
        default: ''
      },
      unit: {
        type: String,
        default: '元'
      }
    },
    data() {
      return {
        show: false,
        password: ''
      };
    },
    watch: {
      value(val) {
        this.show = val
      },
      show(val) {
        if (val) {
          this.password = ''
        }
        if (!val) {
          this.$emit('input', false)
        }
      }
    },
    methods: {
      onChange(val) {
        if (this.password.length < 6) {
          this.password += val;
        }

        if (this.password.length >= 6) {
          this.finish()
        }
      },
      onBackspace(e) {
        if (this.password.length > 0) {
          this.password = this.password.substring(0, this.password.length - 1);
        }
      },
      finish() {
        this.show = false
        this.$emit('finish', this.password)
      }
    }
  }
</script>

<style lang="scss">
  .pay-wrap {
    display: flex;
    flex-flow: column;
    align-items: center;
    padding: 24rpx 0;
    
    .money {
      font-size: 80rpx;
      color: #ff9900;
      margin-bottom: 24rpx;
      
      .unit {
        font-size: 32rpx;
        padding: 8rpx;
      }
    }
    
    .tips {
      font-size: 24rpx;
      color: #a7a7a7;
      margin-top: 24rpx;
    }
  }
</style>
